<template>
  <el-card class="box-card" style="padding:0">
    <!-- 数据显示区域 -->
    <div v-if="worksDatahome.length > 0">
      <div v-if="activeName === 0">
        <Works :worksData="worksDatahome"></Works>
      </div>
      <div v-else-if="activeName === 1">
        <Works :worksData="worksDataplay"></Works>
        <router-link v-if="!worksDatahome" to="/publish">该模块暂时没有数据哦，点击做第一个发布的吧</router-link>
      </div>
      <div v-else-if="activeName === 2">
        <Works :worksData="worksDatashare"></Works>
        <router-link v-if="!worksDatashare" to="/publish">该模块暂时没有数据哦，点击做第一个发布的吧</router-link>
      </div>
      <div v-else-if="activeName === 3">
        <Works :worksData="worksDataelse"></Works>
        <router-link v-if="!worksDataelse" to="/publish">该模块暂时没有数据哦，点击做第一个发布的吧</router-link>
      </div>
    </div>
    <div v-else>正在加载数据...</div>
  </el-card>
</template>

<script>
import Works from "@/views/works/index.vue";
// 引入封装计算滚动距离函数
import { getRollLength } from "@/schema/getRollLength";
export default {
  props: ["activeName"],
  data() {
    return {
      // 信息数据
      worksData: [],
      num: 0, //控制获取数据的开始值
      isActive: true, //控制是否发送请求（节流）
    };
  },
  created() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  mounted() {
    // 通知vuex获取相应模块的请求
    this.getwhatplate();
  },
  destroyed() {
    //页面离开后销毁监听事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 获取属于什么模块的数据回调
    getwhatplate() {
      // 判断是激活的那个板块
      if (this.activeName === 0) {
        this.$store.dispatch("gethomeinfo", this.num).then((res) => {
          if (res.result) {
            this.isActive = true; //解除节流
          } else {
            this.$message(res.message);
          }
        });
      } else if (this.activeName === 1) {
        this.$store.dispatch("getplayinfo", this.num).then((res) => {
          if (res.result) {
            this.isActive = true; //解除节流
          } else {
            this.$message(res.message);
          }
        });
      } else if (this.activeName === 2) {
        this.$store.dispatch("getshareinfo", this.num).then((res) => {
          if (res.result) {
            this.isActive = true; //解除节流
          } else {
            this.$message(res.message);
          }
        });
      } else if (this.activeName === 3) {
        // this.getElseInfo(); // 获取其他板块信息
        this.$store.dispatch("getelseinfo", this.num).then((res) => {
          if (res.result) {
            this.isActive = true; //解除节流
          } else {
            this.$message(res.message);
          }
        });
      }
    },
    // 滚动事件回调
    handleScroll() {
      // 去判断是否触底
      let result = getRollLength();
      // 判断返回值是否为true
      if (result) {
        // 判断是否可以发起请求
        if (this.isActive) {
          this.num += 5;
          this.isActive = false;
          this.getwhatplate();
        }
      }
    },
  },
  computed: {
    // vuex中的个人信息
    worksDatahome() {
      return this.$store.state.home.worksDatahome;
    },
    worksDataplay() {
      return this.$store.state.home.worksDataplay;
    },
    worksDatashare() {
      return this.$store.state.home.worksDatashare;
    },
    worksDataelse() {
      return this.$store.state.home.worksDataelse;
    },
  },
  components: {
    Works,
  },
};
</script>

<style lang="less" scoped>
.el-card {
  border: 0;
}
// /deep/深度选择器
/deep/.el-card__body {
  padding: 0;
}
</style>